<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="Ctrl as c">
<button ng-click="c.add()">add one to cache</button>
<button ng-click="c.clean()">clean</button>
<button ng-click="c.destroy()">destroy cache obj</button>
<br/>
cache info:
    <pre>
        {{c.cacheInfo()}}
    </pre>
cache[key] value:
    <pre>
        {{c.cache()}}
    </pre>
<script src="../../../../../../../bower_components/angular/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.factory('appCache', appCache);
    appCache.$inject = [
        '$cacheFactory'
    ];
    // 使用 $cacheFactory 生成一个 cache 对象
    function appCache($cacheFactory) {

        return $cacheFactory('cacheId');// cacheId: 此 cache 对象的 id
    }
    app.controller('Ctrl', function (appCache, $document) {
        var vm = this, INIT_ID = 1, addId = INIT_ID;

        console.log(appCache);
        vm.add = function () {
            var addObj = {
                id: addId,
                name: 'Jim'
            };
            addId++;
            var arr = appCache.get('key') || []; // 获取 appCache 里 key 为 ‘key’ 的对象
            arr.push(addObj);
            appCache.put('key', arr); // 添加 arr 到 appCache 中， 并命名为 ‘key’
        };
        vm.clean = function () {
            appCache.removeAll(); // 清空 appCache 里所有的缓存值, remove(key)可以删除指定的缓存对象
        };
        vm.destroy = function () {
            var isConfirm = confirm('destroy 后 cache obj 就不存在了');
            if (!isConfirm) {
                return;
            }
            appCache.destroy(); // 销毁 appCache 对象
            angular.element($document).find('button').prop('disabled', isConfirm);
        };
        vm.cacheInfo = function () {

            return appCache.info(); // id 是生成时 appCache 的 id，size是 appCache 里缓存的数量
        };
        vm.cache = function () {

            return appCache.get('key');
        };
    });
</script>
</body>
</html>